<template>
	<view :class="isRadius?'swiper':'swiper-2'" :style="height2">
		<swiper indicator-dots="true" :autoplay="true" :circular="true" :interval="2000" :duration="1000" indicator-active-color="#FFFFFF" indicator-color="#A0A8AB" :style="height2" @change="onSwiperChange">
			<block v-for="(item,index) in bannerList" :key="index">
				<swiper-item>
					<navigator :url='item.url' class='' hover-class='none'>
						<image :src="item.pic" class="slide-image" lazy-load></image>
					</navigator>
				</swiper-item>
			</block>
		</swiper>
		<view v-if="!isRadius" class="corner-mark" :style="{bottom:cornerMarkBottom}">
			<image src="/static/logo.png" mode=""></image>
			<text>{{swiperIndex+1}}</text>/
			<text>{{bannerList.length}}</text>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted,watch} from "vue";
	let props = defineProps({
		height: {
			type: String,
			default:'270rpx;'
		},
		bannerList:{
			type: Array,
			default: function() {
				return [];
			}
		},
		isRadius: {
		    type: Boolean,
		    default: true
		},
		cornerMarkBottom: {
		    type: String
		}
	})
	
	
//-----------------------------------data---------------------------------
	
	let height2 = ref("")
	let swiperIndex = ref(0)
	
//--------------------------------onMounted-------------------------------
	
	onMounted(()=>{
		height2.value = '--height:'+props.height
	})
	
//-----------------------------------watch--------------------------------
	
	// watch(height2,(newValue,oldValue)=>{
	// 	console.log(oldValue,'oldValue')
	// 	console.log(newValue,'newValue')
	// })
	
//-----------------------------------function--------------------------------
	// 轮播图变化
	function onSwiperChange(e) {
		// console.log(e)
		swiperIndex.value = e.detail.current;
	};
	
const emits = defineEmits(['click'])
const onClick = () => {
  emits('click')
}

	
	
</script>

<style scoped lang="scss">
.swiper {
	width: 702rpx;
	height: 270rpx;
	margin: 0 auto;
	margin-top: 24rpx;
	border-radius: 16rpx;
	overflow: hidden;
	swiper,
	.swiper-item,
	image {
		width: 100%;
		height: 270rpx;
	}
}
.swiper-2 {
	width: 750rpx;
	height: var(--height);
	overflow: hidden;
	position: relative;
	swiper,
	.swiper-item,
	image {
		width: 100%;
		height: var(--height);
	}
	.corner-mark{
		width: 90rpx;
		height: 32rpx;
		border-radius: 24rpx;
		position: absolute; 
		right: 24rpx;
		bottom: 24rpx;
		background-color: rgba(0,0,0,0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		color: #fff;
		image{
			width: 22rpx;
			height: 20rpx;
			margin-right: 4rpx;
		}
		text{
			margin: 0 2rpx;
		}
	}
}
</style>
